<template>
    <div class="content-box">
        <div class="container">
            <div class="background">
                <div class="top-nav-wrap">
                    <strong>大盘信息速递 北京时间： {{ nowTime }}</strong>
                </div>
                <div class="text_info" style="margin-top:5px;color:indianred">以下指数行情及图片均为实时行情，将会自动更新。</div>
                <div>
                    <div style="float: left;width: 460px;height: 1000px">
                        <div>
                            <div class="row_blk" style="margin-top:5px;float:left">
                                <div class="detail_blk">
                                    <div class="container">
                                        <div>
                                            <div style="color:#66B3FF" class="text">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;美国股市
                                            </div>
                                        </div>
                                        <div class="index_blk">
                                            <div class="title index_blk">
                                                <h4>道琼斯 {{ dqszs }} {{ dqszde }} {{ dqszdf }}</h4>
                                                <div class="img_wrap">
                                                    <a
                                                        href="http://finance.sina.com.cn/stock/usstock/US100_DJI.shtml"
                                                        target="_blank"
                                                        id="img_gb_dji"
                                                        ><img src="//image.sinajs.cn/newchart/v5/usstock/min_idx_s/.dji.gif?1654010396744"
                                                    /></a>

                                                    <label id="st_chartarea_gb_dji" style="line-height: 150px;">{{ dqszt }}</label>
                                                </div>
                                            </div>
                                            <div class="index_blk" style="margin-top:185px;">
                                                <div class="title">
                                                    <h4>标普500 {{ bpzs }} {{ bpzde }} {{ bpzdf }}</h4>
                                                </div>
                                                <div class="img_wrap">
                                                    <a
                                                        href="http://finance.sina.com.cn/stock/usstock/US100_INX.shtml"
                                                        target="_blank"
                                                        id="img_gb_inx"
                                                        ><img src="//image.sinajs.cn/newchart/v5/usstock/min_idx_s/.inx.gif?1654010396745"
                                                    /></a>

                                                    <label id="st_chartarea_gb_inx">{{ bpzt }}</label>
                                                </div>
                                            </div>

                                            <div class="index_blk" style="margin-top:55px;">
                                                <div class="title">
                                                    <h4>纳斯达克 {{ nsdkzs }} {{ nsdkzde }} {{ nsdkzdf }}</h4>
                                                </div>
                                                <div class="img_wrap">
                                                    <a
                                                        href="http://finance.sina.com.cn/stock/usstock/US100_IXIC.shtml"
                                                        target="_blank"
                                                        id="img_gb_ixic"
                                                        ><img src="//image.sinajs.cn/newchart/v5/usstock/min_idx_s/.ixic.gif?1654012677258"
                                                    /></a>

                                                    <label id="st_chartarea_gb_inx">{{ nsdkzt }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="float: right;width: 460px;height: 1000px">
                        <div>
                            <div class="row_blk" style="margin-top:5px;float:left">
                                <div class="detail_blk">
                                    <div class="container">
                                        <div>
                                            <div style="color:#66B3FF" class="text">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国股市
                                            </div>
                                        </div>
                                        <div class="index_blk">
                                            <div class="title index_blk">
                                                <h4>上证指数 {{ shzs }} {{ shzde }} {{ shzdf }}</h4>
                                                <div class="img_wrap">
                                                    <a
                                                        href="http://finance.sina.com.cn/realstock/company/sh000001/nc.shtml"
                                                        target="_blank"
                                                        id="img_sh000001"
                                                        ><img src="//image.sinajs.cn/newchart/small/nsh000001.gif?1654015676746"
                                                    /></a>
                                                    <label id="st_chartarea_gb_dji">{{ shzt }}</label>
                                                </div>
                                            </div>
                                            <div class="index_blk" style="margin-top:185px;">
                                                <div class="title">
                                                    <h4>深证成指 {{ szzs }} {{ szzde }} {{ szzdf }}</h4>
                                                </div>
                                                <div class="img_wrap">
                                                    <a
                                                        href="http://finance.sina.com.cn/realstock/company/sz399001/nc.shtml"
                                                        target="_blank"
                                                        id="img_sz399001"
                                                        ><img src="//image.sinajs.cn/newchart/small/nsz399001.gif?1654015737251"
                                                    /></a>
                                                    <label id="st_chartarea_gb_inx">{{ szzt }}</label>
                                                </div>
                                            </div>

                                            <div class="index_blk" style="margin-top:55px;">
                                                <div class="title">
                                                    <h4>沪深300 {{ hszs }} {{ hszde }} {{ hszdf }}</h4>
                                                </div>
                                                <div class="img_wrap">
                                                    <a
                                                        href="http://finance.sina.com.cn/realstock/company/sh000300/nc.shtml"
                                                        target="_blank"
                                                        id="img_sh000300"
                                                        ><img src="//image.sinajs.cn/newchart/small/nsh000300.gif?1654015737252"
                                                    /></a>
                                                    <label id="st_chartarea_gb_inx">{{ hszt }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "dapanxinxi.vue",
  data() {
    return {
      nowTime: "",
      dqszs: '32987.85',
      dqszde: '-239.35',
      dqszdf: '-0.72%',
      dqszt: '开盘中',
      bpzs: '4144.61',
      bpzde: '-13.61',
      bpzdf: '-0.36%',
      bpzt: "开盘中",
      nsdkzs: '12141.59',
      nsdkzde: '10.46',
      nsdkzdf: '0.17%',
      nsdkzt: '开盘中',
      shzs: '3186.43',
      shzde: '37.37',
      shzdf: '1.19%',
      shzt: '已收盘',
      szzs: '11527.62',
      szzde: '217.34',
      szzdf: '1.92%',
      szzt: '已收盘',
      hszs: '4091.52',
      hszde: '62.50',
      hszdf: '1.55%',
      hszt: '已收盘'
    }
  },
  mounted() {
    this.nowTimes();
  },
  beforeDestroy() {
    this.clear();
  },
  methods: {
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
      let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
      let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
      let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
      this.nowTime = year + "." + month + "." + date + "  " + "星期" + '日一二三四五六'.charAt(new Date().getDay()) + " " + hh + ":" + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    }
  }

}
</script>

<style scoped>
.background{
  background-color: #E0E0E0;
  height:100%;
  width: 100%;
}
.text {
  height: 35px;
  line-height: 40px;
  padding: 0 1em;
  margin-top: 3px;
  color: #666;
  font-size: 28px;
  width: 700px;
}

.text_info {
  height: 35px;
  line-height: 40px;
  padding: 0 1em;
  margin-top: 3px;
  color: #666;
  font-size: 20px;
}

.top-nav-wrap {
  font-size: 30px;
  font-family: simsun;
  height: 50px;
  background-color: #f7f7f7;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;

}

.row_blk {
  width: 100%;
  clear: both;
  overflow: hidden;
  margin-top: 10px;
}

.detail_blk {
  background: #fff;
}

.detail_blk .head {
  background: #E7F2F8;
  height: 29px;
  line-height: 29px;
  position: relative;
}

.detail_blk .container {
  margin-left: 20px;
  padding: 0px 0 0 0px;
  width: 100%;
}

.index_blk {
  margin-left: 20px;
  width: 100%;
  height:100%;
}

.index_blk .title {
  height: 20px;
}

.index_blk .img_wrap {
  height: 150px;
  background: #fff;
  position: relative;
}

div {
  display: block;
}
</style>
